<template>
  <div class="form__wrapper">
    <base-form
      ref="form"
      :label-width="'110px'"
      column="single"
      :form-list="formList"
      :form-rules="formRules"
      :form-disabled="submitLoading" />
    <div class="actions">
      <el-button type="primary" size="small" @click="submit" :loading="submitLoading">提交</el-button>
      <el-button type="default" size="small" @click="cancel" :disabled="submitLoading">取消</el-button>
    </div>
  </div>
</template>

<script>
import BaseForm from '@/components/BaseForm'
import { dict_goodsStatus } from '@/utils/dictionary'
import { format_date } from '@/utils/formatter'

import { createApi,typeListApi } from '@/api/modules/shop/goods'

export default {
  name: 'ProductionCreate',
  components: { BaseForm },
  data () {
    return {
      formList: [
        { label: '商品名称', prop: 'name', placeholder: '请输入（创建后不可修改）' },
        { label: '商品发布日期', prop: 'pubDate', type:'date' },
        { label: '商品图片', prop: 'file' , type: 'file',accept: '.png,.jpg,.jpeg', placeholder: '请选择文件，只允许.png,.jpg,.jpeg'},
        { label: '商品价格', prop: 'price' ,type: 'number',step:'0.01'},
        { label: '商品优惠价格', prop: 'preferencePrice' ,type: 'number',step:'0.01'},
        { label: '销售量', prop: 'sale' ,type: 'number'},
        { label: '商品数量', prop: 'amount' ,type: 'number'},
        { label: '商品描述信息', prop: 'intro' ,type: 'textarea'},
        { label: '备注', prop: 'remark' ,type: 'textarea'},
        { label: '商品类别', prop: 'typeId' ,type: 'select',options:[]},
        { label: '商品状态', prop: 'status' ,type: 'select',options:dict_goodsStatus},
      ],

      formRules: {
        name: [
          { required: true, message: '类型名称不能为空', trigger: ['blur', 'change'] },
          { max: 50, message: '类型名称不能超过50个字符', trigger: ['blur', 'change'] }
        ],
      },

      submitLoading: false
     
    }
  },
  methods: {
    // 商品列表
    async getGoodsTypeOptions () {
      try {
        const res = await typeListApi()
        this.$refs['form'].setOptions({
          prop: 'typeId',
          options: res.data.map(({ id, typeName }) => ({ label: typeName, value: id }))
        })
        
        if(this.id !== -1) {
          this.$refs['form'].setFormData({
            typeId: this.id
          })
        }
      } catch (err) {
        console.error(err)
      }
    },
    submit () {
      
      this.$refs['form'].validate(async valid => {
        if(valid) {
          try {
            this.submitLoading = true
            const params = this.$refs['form'].getFormData({ dataType: 'FormData' })
            params.set('pubDate', format_date(params.get('pubDate')))
            await createApi(params)
            this.$message({ type: 'success', message: '添加成功' })
            this.$emit('success')
          } catch (err) {
            console.error(err)
          }
          this.submitLoading = false
        }
      })
    },
    cancel () {
      this.$emit('close')
    }
   
  },
  mounted() {
    this.getGoodsTypeOptions()
  }
}
</script>

<style lang="less" scoped>
@import '../../../styles/form.less';
</style>